<template>
  <div>
    <div class="head">
      <h3>短信验证码登录</h3>
    </div>
    <div class="china">
        <template>
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="国家和地区  "
            placeholder="请选择所在地区"
            @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
        </template>
      </div>
    <van-form @submit="onSubmit" @failed="onFail" class="form">
      
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' },
        { pattern: reg.phone, message: '请输入正确的手机号码' },
        ]"
      />
      <van-field
        v-model="form.captcha"
        type="text"
        center
        clearable
        name="captcha"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请输入短信验证码' },
          { pattern: reg.code, message: '请输入正确的验证码' },
        ]"
        ><template #button>
          <van-button
            v-if="toggle"
            @click="startSend"
            size="small"
            :disabled="flag"
            native-type="button"
            type="primary"
            >发送验证码</van-button
          >
          <van-button v-else size="small" native-type="button"
            >剩余{{ count }}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >验证登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      flag: false,
      count: 60,
      toggle: true,
      form: {},
      radio: "1",
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "中国",
          value: "86",
          children: [
            { text: "大陆", value: "86" },
            { text: "台湾", value: "86" },
            { text: "香港", value: "86" },
          ],
        },
        {
          text: "老挝",
          value: "00",
          children: [{ text: "森林", value: "00" }],
        },
        {
          text: "缅甸",
          value: "001",
          children: [{ text: "金三角", value: "001" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    onFail() {
      this.$toast("请输入有效的数据信息");
    },
    startSend() {
      this.toggle = false;
      this.count--;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.toggle = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.count = 60;
        }
      }, 1000);
      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          if (res.code == 200) {
            this.ShowSuccess("验证码发送成功");
          }else{
            this.ShowError('验证码每天最多发送五条')
          }
        });
    },
    onSubmit(value) {
      // 步骤
      //1.校验验证码
      //2.先判断手机号是否已经被注册
      this.$ajax.verifyCaptcha(value).then((res)=>{
        if(res.code==200){
          //判断这个手机号码是否被注册
          this.$ajax.findUser({
            phone:value.phone,
          }).then((res)=>{
            if(res.length>0){
              this.ShowSuccess('登陆成功');
              this.$router.push({name:'mine'});
              //用户信息存储
              this.changeUserInfo(res[0]);
              localStorage.setItem('userInfo',JSON.stringify(res[0]))
            }else{
              this.ShowSuccess('用户不存在请先注册')
            }
          })
        }else{
          this.ShowSuccess('验证码校验失败')
        }
      })
    }
  },
};
</script>



<style lang="scss" scoped>
.head {
  background-color: #000;
  position: relative;
  height: 60px;
  line-height: 60px;
  top: -20px;
  width: 100%;
  color: #fff;
  h3 {
    font-weight: normal;
  }
}
</style>